<template>
  <div>
    <el-image
      style="width: 100px; height: 100px; margin-left: 50px"
      src="../../../public/image1.png"
    />
    <span style="line-height: 100px; font-weight: bolder; margin: 0 20px">
      房屋编号：{{data.list[0].contract_number}}
    </span>
    <el-button style="background-color: #d6ebd3">空置-已打扫</el-button>
  </div>
  <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
    <el-tab-pane label="合同信息" name="first">
      <el-table
        :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
        :data="data.list"
        stripe
        style="width: 100%"
      >
        <el-table-column prop="contract_number" label="合同编号" min-width="25%" />
        <el-table-column prop="contract_name" label="租住方案" min-width="25%" />
        <el-table-column prop="contract_name" label="租金" min-width="25%" />
        <el-table-column prop="start_time" label="合同开始时间" min-width="25%" />
      </el-table>
      <el-table
        :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
        :data="data.list"
        stripe
        style="width: 100%"
      >
        <el-table-column prop="end_time" label="合同结束时间" min-width="25%" />
        <el-table-column prop="personname" label="签订人" min-width="25%" />
        <el-table-column prop="idcard" label="身份证号码" min-width="25%" />
        <el-table-column prop="idcard" label="手机号" min-width="25%" />
      </el-table>
      <el-table
        :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
        :data="data.list"
        stripe
        style="width: 100%"
      >
        <el-table-column prop="start_time" label="签订时间" min-width="25%" />
        <el-table-column prop="start_time" label="生效时间" min-width="25%" />
        <el-table-column prop="contract_number" label="租住房屋编号" min-width="25%" />
        <el-table-column prop="status" label="租住房屋公寓" min-width="25%" />
      </el-table>
      <el-table
        :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
        :data="data.list"
        stripe
        style="width: 100%"
      >
        <el-table-column prop="contract_number" label="紧急联系人" min-width="25%" />
        <el-table-column prop="contract_number" label="联系电话" min-width="25%" />
        <el-table-column
          prop="contract_number"
          label="身份证照片 正面"
          min-width="25%"
        />
        <el-table-column prop="contract_number" label="身份证照片 反面" min-width="25%" />
      </el-table>
    </el-tab-pane>
    <el-tab-pane label="合同附件预览" name="second">
      <el-image
        style="width: 300px; height: 250px"
        src="../../../public/image1.png"
      />
    </el-tab-pane>
    <el-tab-pane label="物业交割" name="third">
      <el-card style="max-width: 480px">
        <img
          src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
          style="width: 100%"
        />
      </el-card>
    </el-tab-pane>
  </el-tabs>
</template>
<script>
import { reactive } from "vue";
import { useRoute } from "vue-router";
export default{
  setup(){
    const data=reactive({
      list:[]
    })
    var contractData = reactive([])
    var router = useRoute()
    contractData = router.query
    data.list.push(contractData)
    return {contractData,data}
  }
}
</script>